import LogicFlow from "@logicflow/core";
import {
  DndPanel,
  SelectionSelect,
  Control,
  MiniMap
} from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";

const lf = new LogicFlow({
  container: document.querySelector("#app"),
  grid: true,
  plugins: [DndPanel, SelectionSelect, Control, MiniMap]
});
// 设置节点面板
lf.setPatternItems([
  {
    label: "选区",
    icon:
      "",
    callback: () => {
      lf.openSelectionSelect();
      lf.once("selection:selected", () => {
        lf.closeSelectionSelect();
      });
    }
  },
  {
    type: "circle",
    text: "开始",
    label: "开始节点",
    icon:
      ""
  },
  {
    type: "rect",
    label: "用户任务",
    icon:
      "",
    className: "important-node"
  },
  {
    type: "rect",
    label: "系统任务",
    icon:
      "",
    className: "import_icon"
  },
  {
    type: "diamond",
    label: "条件判断",
    icon:
      ""
  },
  {
    type: "circle",
    text: "结束",
    label: "结束节点",
    icon:
      ""
  }
]);
// 添加导航栏
lf.extension.control.addItem({
  iconClass: "custom-minimap",
  title: "",
  text: "导航",
  onMouseEnter: (lf, ev) => {
    const position = lf.getPointByClient(ev.x, ev.y);
    MiniMap.show(
      position.domOverlayPosition.x - 120,
      position.domOverlayPosition.y + 35
    );
  },
  onClick: (lf, ev) => {
    const position = lf.getPointByClient(ev.x, ev.y);
    MiniMap.show(
      position.domOverlayPosition.x - 120,
      position.domOverlayPosition.y + 35
    );
  }
});

lf.render();
